<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeMirror 代码编辑器</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- CodeMirror CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.css">
</head>
<body class="bg-light">
<div class="container mt-5">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">代码编辑器</h5>
                    <div class="btn-group">
<!--                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="getCode()">-->
<!--                            <i class="bi bi-download"></i> 获取代码-->
<!--                        </button>-->
<!--                        <button type="button" class="btn btn-sm btn-outline-success" onclick="loadCode()">-->
<!--                            <i class="bi bi-upload"></i> 加载代码-->
<!--                        </button>-->
                        <select id="language-select" class="form-select form-select-sm">
                            <option value="python">Python</option>
                            <option value="javascript">JavaScript</option>
                            <option value="json">JSON</option>
                            <option value="java">Java</option>
                        </select>
                    </div>
                </div>
                <div class="card-body p-0">
                    <textarea id="code-editor"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- CodeMirror JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/python/python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/clike/clike.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js"></script>

<script>
    // 初始化CodeMirror编辑器
    const editor = CodeMirror.fromTextArea(document.getElementById('code-editor'), {
        lineNumbers: true,
        theme: 'dracula',
        mode: 'python',
        indentUnit: 4,
        smartIndent: true,
        matchBrackets: true,
        autoCloseBrackets: true,
    });
    editor.setValue("# 这是 Python 代码示例\nprint('Hello, World!')");

    // 语言切换功能
    document.getElementById('language-select').addEventListener('change', (e) => {
        const modeMap = {
            'python': 'python',
            'javascript': 'javascript',
            'json': {name: 'javascript', json: true},
            'java': 'text/x-java'
        };
        editor.setOption('mode', modeMap[e.target.value]);
        var selectedLanguage = e.target.value;
        // 根据选择的语言更新编辑器的模式
        if (selectedLanguage === 'python') {
            editor.setOption('mode', 'python');
            editor.setValue("# 这是 Python 代码示例\nprint('Hello, World!')");
        } else if (selectedLanguage === 'json') {
            editor.setOption('mode', 'json');
            editor.setValue('{\n    "message": "Hello, World!"\n}');
        } else if (selectedLanguage === 'java') {
            editor.setOption('mode', 'text/x-java');
            editor.setValue('// 这是 Java 代码示例\npublic class Main {\n    public static void main(String[] args) {\n        System.out.println("Hello, World!");\n    }\n}');
        }
    });

    // 获取编辑器内容
    function getEditorContent() {
        return {
            content: editor.getValue(),
            language: document.getElementById('language-select').value
        };
    }

    // 设置编辑器内容和语言
    function setEditorContent(content, language) {
        editor.setValue(content);
        document.getElementById('language-select').value = language;
        const modeMap = {
            'python': 'python',
            'javascript': 'javascript',
            'json': {name: 'javascript', json: true},
            'java': 'text/x-java'
        };
        editor.setOption('mode', modeMap[language]);
    }

    // 获取代码
    function getCode() {
        const content = getEditorContent();
        alert(`获取代码成功！\n语言：${content.language}\n内容：\n${content.content}`);
    }

    // 加载代码
    function loadCode() {
        fetch('/api/code')
            .then(response => response.json())
            .then(data => {
                setEditorContent(data.content, data.language);
                alert('代码加载成功！');
            })
            .catch(error => {
                console.error('加载代码失败:', error);
                alert('加载代码失败，请稍后重试');
            });
    }

    // 暴露函数给全局
    window.getEditorContent = getEditorContent;
    window.setEditorContent = setEditorContent;
</script>
</body>
</html>
